<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<p>this.imagePreview = function(){ <br />
  /* CONFIG */<br />
  <br />
  xOffset = 10;<br />
  yOffset = 30;<br />
  <br />
  // these 2 variable determine popup's distance from the cursor<br />
  // you might want to adjust to get the right result<br />
  <br />
  /* END CONFIG */<br />
  $(&quot;a.preview&quot;).hover(function(e){<br />
  this.t = this.title;<br />
  this.title = &quot;&quot;; <br />
  var c = (this.t != &quot;&quot;) ? &quot;&lt;br/&gt;&quot; + this.t : &quot;&quot;;<br />
  $(&quot;body&quot;).append(&quot;&lt;p id='preview' style='width: 300px '&gt;&lt;img src='&quot;+ this.href +&quot;' alt='Image preview'  height=90px width=290px/&gt;&quot;+ c +&quot;&lt;/p&gt;&quot;); <br />
  $(&quot;#preview&quot;)<br />
  .css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)<br />
  .css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;)<br />
  .fadeIn(&quot;fast&quot;); <br />
  },<br />
  function(){<br />
  this.title = this.t; <br />
  $(&quot;#preview&quot;).remove();<br />
  }); <br />
  $(&quot;a.preview&quot;).mousemove(function(e){<br />
  $(&quot;#preview&quot;)<br />
  .css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)<br />
  .css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;);<br />
  }); <br />
  };<br />
</p>
<p>// starting the script on page load<br />
  $(document).ready(function(){<br />
  imagePreview();<br />
  });</p>
</body>
</html>